<script setup>
import { onMounted, reactive,ref, watch } from "vue";
import { useRoute,useRouter } from "vue-router"
import { getTadil } from "../api/home";

const route = useRoute()
const router = useRouter()

let id = route.query.movieId
const  data = reactive({
    movieDetail:[],
    celebrities:[],
    videoList:[],
    stillList:[],
    boxOffice:[],
    boxOfficeDetail:[],
    tips:[],
    comment:[],
    question:[],
    newsList:[],
    relatedMovies:[],
    sc:Number
})
const flag = ref(0)
console.log(id);
const getData=()=>{
    getTadil(id).then(res=>{
        if(res.data.tips.tips[0]!=null){
            console.log(res);
            data. movieDetail = res.data.movie
            data.celebrities = res.data.celebrities
            data.videoList = res.data.feedVideos.feeds
            data.stillList = res.data.movie.photos
            data.boxOfficeDetail = res.data.mbox
            data.boxOffice = res.data.mbox.mbox
            data.tips = res.data.tips.tips[0]
            data.comment = res.data.comments.hotComments
            data.question = res.data.questions.questions
            data.newsList = res.data.newsList.newsList
            data.relatedMovies = res.data.relatedMovies
            data.sc = res.data.movie.sc
            flag.value = 1
        }else{
            data. movieDetail = res.data.movie
            data.celebrities = res.data.celebrities
            data.videoList = res.data.feedVideos.feeds
            data.stillList = res.data.movie.photos
            data.boxOfficeDetail = res.data.mbox
            data.boxOffice = res.data.mbox.mbox
            data.comment = res.data.hotComment
            data.question = res.data.questions.questions
            data.newsList = res.data.newsList.newsList
            data.relatedMovies = res.data.relatedMovies
            console.log(res);
        }
    })

}
onMounted(()=>{
    getData();    
 })
watch(route,(to,from)=>{
    id = route.query.movieId
    getData();
 })
// console.log(data.newsList);
const toUser=()=>{
    router.push('/user')
}
</script>

<template>
    <div class="detail">
        <div class="item-top">
        <div class="pic">
            <a :href="data.movieDetail.vd">
                <img :src="data.movieDetail.img" alt="">
                <img src="https://obj.pipi.cn/festatic/common/image/2a192bd00ce15cbcf0cd1e157052887e.png" alt="" class="btn">
            </a>
            
        </div>
        <div class="introduce">
            <h1 class="nm">{{ data.movieDetail.nm }}</h1>
            <p>{{ data.movieDetail.enm }}</p>
            <p>{{ data.movieDetail.cat }}</p>
            <p>{{ data.movieDetail.star }}</p>
            <p>{{ data.movieDetail.pubDesc }}&nbsp;/&nbsp;{{ data.movieDetail.dur }}&nbsp;分钟</p>
            <div class="xk-btn">
            <button  @click="toUser()">
                <img 
                src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/want-to-watch.png" 
                alt="想看">
                <span>想看</span>
            </button>
        </div>
        </div>
    </div>
    <div class="mark-comments">
            <div class="left">
                <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/logo-new.png" alt="">
                &nbsp;
                <span>猫眼点映评分</span>
            </div>
            <!-- <div class="">
                <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/star-full-graded.png" alt="">
                <span>{{ data.sc }}</span>
            </div> -->
            <div class="right">
                <span class="data">{{ data.movieDetail.wish }}&nbsp;</span><span>人想看</span>
            </div>
    </div>
    <div  class="tips" v-if="flag">
        <div class="tips-content">
        <img 
        src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/tip-icon-surprise.png" 
        alt="">
        <span>{{ data.tips.content }}</span>
        </div>
    </div>
    <div class="intro">
            <div class="unfold-packUp">
                <span>简介</span>
                <span class="unfold-packUp-btn">
                    展开
                    <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/arrow-right.png" alt="">
                </span>
                <!-- <span>、
                    收起
                    <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/arrow-right.png" alt="">
                </span> -->
            </div>
            <p>
                {{ data.movieDetail.dra }}
            </p>
        </div>
    <div class="personList">
        <div class="person">
            <span>演职人员</span>
            <span class="allPerson">
                <a href="https://i.maoyan.com/asgard/movie/1385865/credits">
                    全部
                <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/arrow-right-black.png" alt="">
                </a>
            </span>
        </div>
        <div class="person-list">
                <div
                class="person-rate-item" 
                v-for="item in data.celebrities"
                :key="item.movieId"
                >
                    <div class="poster">
                        <img :src="item.avatar" :alt="item.cnm">
                    </div>
                    <p style="color:white ;">{{ item.cnm }}</p>
                    <p style="color: darkgrey;">{{ item.desc }}</p>
                </div>
            </div>
    </div>
    <div class="video-list">
        <div class="video-top">
            <span>视频</span>
            <span class="videos">
                <a href="https://i.maoyan.com/asgard/movie/1385865/preview">
                    全部
                <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/arrow-right-black.png" alt="">
                </a>
            </span>
        </div>
        <div class="video-list-item">
                <div
                class="video-item" 
                v-for="item in data.videoList"
                :key="item.movieId"
                >
                <div class="video">
                    <img src="../assets/images/play.jpg" alt="" class="play">
                    <a :href="item.video.url">
                        <img :src="item.video.imgUrl" alt="">
                    </a>
                </div>
                </div>
            </div>
    </div>
    <div>
        <p>剧照</p>
        <div class="photos-list">
                <div
                class="photos-rate-item" 
                v-for="item in data.stillList"
                :key="item.movieId"
                >
                    <div class="poster">
                        <img :src="item" alt="">
                    </div>
                </div>
            </div>
    </div>
    </div>
    <div class="hotComment">
        <div class="head">
            <span>短评</span>
        </div>
        <div class="Comments" v-for="item in data.comment" :key="item">
            <div class="left">
                <img :src="item.avatarUrl" alt="">
            </div>
            <div class="right">
                <div class="top">
                    <div class="top-left">
                        <div class="nick">
                            <div class="userNick">
                                {{ item.nick }}
                            </div>
                            <img src="https://obj.pipi.cn/festatic/common/image/c853ef8e3cb69ad7bced9c38c39af045.png" alt="" v-if="item.userLevel===3?true:false">
                            <img src="https://obj.pipi.cn/festatic/common/image/e3137a2114dfa0f5da5f0d6f5743c8cf.png" alt="" v-if="item.userLevel===2?true:false">
                            <img src="https://obj.pipi.cn/festatic/common/image/d01ce8fba731fb827e1d412efb94f025.png" alt="" v-if="item.userLevel===4?true:false">
                        </div>
                        <div class="score">
                            <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/star-full-graded.png" alt="">
                            <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/star-full-graded.png" alt="">
                            <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/star-full-graded.png" alt="">
                            <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/star-full-graded.png" alt="">
                            <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/star-full-graded.png" alt="">
                            <span class="item-score">{{ item.score }}</span>
                            <span>分</span>
                        </div>
                    </div>
                    <div class="top-right">
                        <img src="https://p1.meituan.net/scarlett/80f9c16d3e6ad90f7bc74cc4249b24151600.png@80q" alt="">
                        {{ item.upCount }}
                    </div>
                </div>
                <div class="content">
                   <h3> {{ item.content }}</h3>
                </div>
                <div class="down">
                    <div class="button">
                        <span>{{ item.replyCount }}</span>
                        <span>回复</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-bar"></div>
    <div class="question-answer">
        <div class="discuss">
            <span>讨论</span>
        </div>
        <div class="question-answer-list" v-for="item in data.question" :key="item">
            <div class="question">{{ item.question.content  }}</div>
            <div class="answerCnt">{{ item.question.answerCnt }}个讨论</div>
            <div v-if="item.question.answerCnt!=0? true:false" class="answer">{{ item.answer.content }}</div>
        </div>
    </div>
    <div class="bg-bar"></div>
    <div class="relevant">
        <div class="box-office">
            <span class="box">
                票房
            </span>         
            <span class="box-office-detail">
                <a :href="data.boxOfficeDetail.url">票房详情
                    <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/arrow-right-black.png" alt="">
                </a>
            </span>
        </div>
        <div class="rank-sumbox">
            <div class="rank">
                <div class="num">
                    {{ data.boxOffice.lastDayRank }}
                </div>
                <div>
                    昨天排名
                </div>

            </div>
            <div class="sumbox">
                <div class="num">
                    {{ data.boxOffice.sumBox }}
                </div>
                <div>
                    累计票房(万)
                </div>
            </div>
        </div>
    </div>
    <div class="bg-bar"></div>
    <div class="related-informations">
        <div class="related-informations-title">
            <span>相关快讯</span>
            <span>
                <a href="https://i.maoyan.com/asgard/news">
                    全部
                    <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/arrow-right-black.png" alt="">
                </a>
            </span>
        </div>
        <div class="information" v-for="item in data.newsList" :key="item">
        <div class="information-top">
            <a href="">
                <div class="informations">
                    <span>{{ item.title }}</span>
                    <img :src="item.previewImages[0].url" alt="">
                </div>
                <div class="info-down">
                   <div class="info-down-left">
                    <span>{{ item.source  }}</span>
                    <!-- <span>{{ item.  }}</span> -->
                   </div>
                   <div class="info-down-right">
                    <span>
                        <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/read-num.png" alt="">
                         {{ item.viewCount  }}
                    </span>
                    <span>
                        <img src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/replying-comments.png" alt="">
                        {{ item.commentCount }}
                    </span>
                   </div>
                </div>
            </a>
        </div>
        </div>
    </div>
    <div class="bg-bar"></div>
    <div class="related-movie">
        <div class="related-movies-top">
            相关影片
        </div>
        <div class="related-movie-list">
                <router-link  
                class="related-movies" 
                v-for="item in data.relatedMovies"
                :key="item.id"
                :to="'/detail?movieId='+item.id"
                >
                    <div class="poster">
                        <img :src="item.img" alt="">
                        <div class="rate">
                            <span>观众评分</span>
                            <span class="score">{{ item.sc }}</span>
                        </div>
                    </div>
                    <p>{{ item.title }}</p>
                </router-link>
        </div>
    </div>
    <div class="blank"></div>
</template>
<style scoped lang="scss">
.detail{
    ::-webkit-scrollbar{
    display: none;
}

    padding: 15px;
    background-color: #401D1D;
    color: white;
    
    .item-top{
        display: flex;
        margin-bottom: 50px;
        .pic{
        width: 125px;
        height: 150px;
        margin-right: 10px;
        position: relative;
        .btn {
            position: absolute;
            bottom:5px;
            left: 5px;
            width: 30px;
            height: 30px;
        }

        img {
            width: 100%;
            height: 100%;
        }
    }
    .introduce{
        width: 300px;
        height: 138px;
        line-height: 25px;
        .nm{
            font-size: 20px;
            margin-bottom:5px ;
            font-weight: 700;
        }
        
        p{
            font-size: 10px;
            color: #fff;
        }
        .xk-btn {
            width: 231px;
            height: 30px;
            button {
                width: 110px;
                background-color:  rgba(255, 255, 255, 0.5);
                border-radius: 6px;
            }
            button:active {
                outline: none;
            }
            img {
                width: 14px;
                height: 14px;
                
            }
        }
    }

    }
    .mark-comments {
        height: 89px;
        background-color:  rgba(255, 255, 255, 0.1);
        margin-bottom: 5px;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        padding:10px ;
        margin-bottom: 30px;
        .left {
            display: flex;
            justify-content: center;
            font-size: 13px;
            img {
                width: 16px;
                height: 16px;
            }
        }
        .right{
            font-size: 13px;
            color: #fff;
            .data {
                color: #Ffb400;
                font-size: 20px;
                font-weight: bold;
            }
        }
    }
    .tips {
        margin-bottom: 20px;
        display: flex;
        justify-content: start;
        .tips-content {
            display: flex;
            justify-content: center;
        }
        img {
            width: 18px;
            height: 18px;
        }
    }
    .intro {
        margin-bottom: 50px;
        .unfold-packUp {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .unfold-packUp-btn {
                font-size: 13px;
                color: #999;
                img {
                    width: 5px;
                    height: 8px;
                }
            }
        }
        p{
            margin-bottom: 10px;
        }
    }
    .personList{
            .person-list{
                margin-top: 12px;
                overflow-x: auto;
                margin-bottom: 50px;
                display: flex;

            }
            .person {
                display: flex;
                justify-content: space-between;
                .allPerson {
                    font-size: 13px;
                    img {
                        width: 5px;
                        height: 8px;
                    }
                    a:link {
                        color: #999;
                    }
                    a:visited {
                        color: #999;
                    }
                }

            }
            .person-rate-item{
                margin-right: 10px;
                width: 80px;
                p{
                    color:white;
                    text-align: center;
                }
                .poster{
                    width: 80px;
                    height: 115px;
                    position: relative;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    }
                }
                
                p{
                    font-size: 13px;
                    color: #222;
                    margin-top: 10px;
                    font-weight: 600;
                }
            }
            .video-list{
            .video-top {
                display: flex;
                justify-content: space-between;
                .videos {
                    font-size: 13px;
                    img {
                        width: 5px;
                        height: 8px;
                    }
                    a:link {
                        color: #999;
                    }
                    a:visited {
                        color: #999;
                    }

            }
            }
            .video-list-item{
            overflow-x: auto;
            margin-bottom: 50px;
            display: flex;
            padding: 10px;
                .video-item{
                .video {
                position: relative;
                overflow: hidden;
                margin-right: 10px;
                width: 140px;
                height: 93px;
                .play {
                    position: absolute;
                    top:30%;
                    left: 35%;
                    border-radius: 50%;
                    width: 30px;
                    height: 30px;
                }
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
            }
        }
        }
    }
    }
    .photos-list{
            display: flex;
            padding: 10px;
            overflow-x: auto;
            .photos-rate-item{
                margin-right: 10px;
                .poster{
                    width: 130px;
                    height: 150px;
                    position: relative;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
}
.relevant{
    padding: 30px 15px 15px 15px;
    .box-office {
       display: flex;
       justify-content: space-between; 
       margin-bottom: 30px;
        .box-office-detail {
            color: #999;
            font-size: 13px;
            img{
                width: 5px;
                height: 8px;
            }
            a:link{
                color: #999;
            }
            a:visited {
                color: #999;
            }
        }

    }
    .rank-sumbox {
        display: flex;
        .rank {
            text-align: center;
            width: 162px;
            height: 67px;
            font-size: 13px;
            .num{
                font-size: 16px;
                color: red;
                margin-bottom: 5px;
            }
        }
        .sumbox {
            text-align: center;
            width: 162px;
            height: 67px;
            font-size: 13px;
            .num{
                font-size: 16px;
                margin-bottom: 5px;
                color: red;
            }
        }
    }
}
.hotComment{
    .head {
        width: 375px;
        padding: 13px;
        border-radius: 10% 10% 0 0;
        border: 1px solid #fff;
    }
    .Comments{
        padding: 10px;
        display: flex;
        .left {
            width: 34px;
            height: 34px;
            margin-right: 10px;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .right {
            .top{
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
                .top-left {
                    width: 240px;
                    .score {
                        .item-score{
                            margin-left: 5px;
                            color: #faaf00;
                            font-size: 13px;
                        }
                        
                        span {
                            color: #faaf00;
                            font-size: 13px;

                        }
                        img {
                            width: 9px;
                            height: 9px;
                        }
                    }
                    .nick {
                        display: flex;
                        .userNick{
                            margin-right: 5px;
                            font-size: 13px;
                            color: #333;
                        }
                        img {
                        width: 36px;
                        height: 18px;
                    }
                    }
 
                }
                .top-right {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 1px solid #e9dfdf;
                    font-size: 12px;
                    color: #999;
                    border-radius: 15px;
                    width: 70px;
                    height: 27px;
                    img{
                        width: 18px;
                        height: 18px;
                        margin-right: 5px;
                    }
                }
            }
            .content{
            margin-bottom: 5px;
                h3{
                width: 305px;
                line-height: 20px;
                overflow: hidden;;
                text-overflow: ellipsis;
                white-space: nowrap;
                }

            }
            .down{
                .button {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 60px;
                height: 20px;
                border:1px  #5a7cab;
                border-radius: 10px;
                font-size: 13px;
                color: #5a7cab;
                background: rgba(90, 122, 203, 0.2);
                
            }
            }

        }
    }
}
.question-answer {
    .discuss {
        padding: 13px;
    }
    .question-answer-list{
        padding: 13px;
        .question{
            color: #333;
            font-weight: bold;
            font-size: 17px;
            line-height: 20px;
        }
        .answerCnt{
            color: #666;
            font-size: 13px;
            margin-top: 5px;
        }
        .answer{
            color: #666;
            font-size: 13px;
            margin-top: 15px;
        }
    }
}
.related-informations{
    margin-top: 10px;
    .related-informations-title{
        display: flex;
        justify-content: space-between;
        padding: 0 13px 0 13px;
        a {
            font-size: 13px;
            color: #999;
            img{
            width: 6px;
            height: 11px;
        }
        }

    }
    .information {
        padding: 0 13px  0 13px;
        .information-top{
            padding: 10px 0 10px 0;
            .informations{
                margin-bottom: 10px;
                display: flex;
                color:#333;
                font-size: 17px;
                line-height: 25px;
                span {
                    width: 340px;
                    margin-right: 3px;
                }
                img{
                    width: 204px;
                    height: 78px;
                }
            }
            .info-down{
            color: #999;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            .info-down-right{
                display: flex;
                justify-content: space-between;
                width: 101px;
                height: 18px;
                img{
                    width: 14px;
                    height: 12px;
                }
            }
        }
        }
     
    }
}
.related-movie{
    ::-webkit-scrollbar{
    display: none;
}
margin-top: 10px;
    .related-movies-top {
        padding-left:13px ;
    }
    .related-movie-list{
        padding-left:13px ;
            display: flex;
            margin-top: 12px;
            overflow-x: auto;
            
            .related-movies{
                margin-right: 10px;
                width: 80px;
                .poster{
                    width: 80px;
                    height: 115px;
                    position: relative;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    .rate{
                        position: absolute;
                        bottom: 0px;
                        width: 100%;
                        font-size: 11px;
                        color: #FAAf00;
                        font-weight: 600;
                        background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000);
                        height: 35px;
                        line-height: 50px;
                        padding-left: 5px;
                        .score{
                            margin-left: 5px;
                            font-weight: 800;
                        }
                    }
                }
                p{
                    font-size: 13px;
                    color: #222;
                    margin-top: 10px;
                    font-weight: 600;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: break-all;
                }
            }
        }


}
.bg-bar{
        background-color: #f5f5f5;
        width: 375px;
        margin-left: -15px;
        height: 10px;
    }
.blank{
    width: 100%;
    height: 50px;
}
</style>